<template>
  <div class="dev-form">
    <FormReport :ref="setRef" />
    <FormFirst :ref="setRef" />
    <FormSeconds :ref="setRef" />
    <FormThird :ref="setRef" />
    <FormFourth :ref="setRef" />
    <FormFifth :ref="setRef" />
    <FormSexth :ref="setRef" />
    <FormSeventh :ref="setRef" />
    <FormEighth :ref="setRef" />
  </div>
</template>

<script setup>
  import FormReport from './FormReport.vue'
  import FormFirst from './FormFirst.vue'
  import FormSeconds from './FormSeconds.vue'
  import FormThird from './FormThird.vue'
  import FormFourth from './FormFourth.vue'
  import FormFifth from './FormFifth.vue'
  import FormSexth from './FormSexth.vue'
  import FormSeventh from './FormSeventh.vue'
  import FormEighth from './FormEighth.vue'

  const FormRef = ref([])

  const setRef = (el) => {
    FormRef.value.push(el)
  }

  const getFormData = () => {
    let params = {}
    for (let i = 0; i < FormRef.value.length; i++) {
      const formData = FormRef.value[i].getFormData()
      if (!formData) {
        return false
      }
      params = { ...params, ...formData }
    }
    return params
  }

  const setFormData = (detailData) => {
    for (let i = 0; i < FormRef.value.length; i++) {
      FormRef.value[i].setFormData(detailData)
    }
  }

  defineExpose({ getFormData, setFormData })
</script>

<style lang="scss" scoped>
  .dev-form {
    margin-top: 40px;
  }
</style>
